<template>
    <div>
        <el-dialog
                :title="popover.title"
                v-model="showPopover"
                @close="handleHidePopover"
                v-if="showPopover"
                class="el-title"
                :class="{ 'keyword-dialog': type == 4 ,'el-delete': type == 0 || type == 'SITELINK' || type == 'CALLOUT' ,'el-call': type == 'CALL'}">

            <el-form class="popover-form" v-if="type == 0"   @click="showTip =false ">
                <el-form-item :label="popover.name" :label-width="formLabelWidth">
                    <el-input class="el-input-title" v-model="popover.adName" auto-complete="off" :maxlength="50"></el-input>
                    <span class="stringCount" @click="edit($event)">{{50- (popover.adName ? popover.adName.length : 0) }}</span>
                </el-form-item>
            </el-form>

            <el-row  v-if="type == 4">
                <el-col :span="12">
                    <el-form>
                        <div class="form-item">
                            <div class="form-label form-label3">关键词<em>*</em>：</div>
                            <div class="form-input " :class="{'showTipInput': showTipKeyword}">
                                <el-input class="el-input" v-model="data.keyword"  @change="changeInput('keyword-0')" @blur="searchKeyword" icon="edit" size="small"></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="form-label">默认出价<em>*</em>：</div>
                            <div class="form-input " :class="{'showTipInput': showTipPrice}">
                                <el-input class="el-input-money" v-model="data.defaultSpend"  @change="changeInput('keyword-1')" size="small"></el-input>
                                <span class="stringMoney">￥ </span>
                            </div>
                        </div>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <div class="type-right">
                        <div class="icon-wrapper" @click="showTip = !showTip">
                            <i class="tip-icon3 iconfont" :class="chooseIcon"></i>
                        </div>
                        <div class="tip-config">
                            <span>竞争：{{popover.competition}}</span>
                            <span>预计搜索量：{{popover.reachData}}</span>
                        </div>
                        <div class="tip-table" v-if="showTip">
                            <el-table :data="tipType" style="width: 100%" :show-header="false" @row-click="selectType">
                                <el-table-column>
                                    <template scope="scope">
                                        <div class="tip-txt1">{{ scope.row.txt }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column >
                                    <template scope="scope">
                                        <i class="tip-icon iconfont" :class="scope.row.tipClass"></i>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-col>

                <el-col :span="24">
                    <div class="aim">
                        <span><i class="iconfont icon-tip"></i>注意：更改关键字会移除原来的关键字，并创建新的关键字</span>
                    </div>
                </el-col>
            </el-row>

            <el-form class="popover-form" v-if="type == 'CALL'">
                <el-form-item label="电话号码：" :label-width="formLabelWidth">
                    <el-select
                            class="input-country"
                            v-model="data.countryIndex"
                            placeholder="国家"
                            size="small">
                        <el-option
                                v-for="(item,index) in countryList"
                                :key="index"
                                :label="item.name"
                                :value="index">
                        </el-option>
                    </el-select>
                    <div class="form-input " :class="{'showTipInput': showTipInput}">
                        <el-input class="el-input" v-model="data.phone" @change="changeInput('call')"  size="small" placeholder="请输入电话号码"></el-input>
                    </div>
                </el-form-item>
                <span class="tel-wrapper">{{showTel}}</span>
            </el-form>

            <el-form class="popover-form1" v-if="type == 'SITELINK'">
                <div class="form-item">
                    <div class="form-label form-label2">链接文字<em>*</em>：</div>
                    <div class="form-input " :class="{'showTipInput': showTip0}">
                        <el-input class="el-input-title" v-model="data.linkText" @change="changeInput('link-0')"  size="small" placeholder="请输入链接文字" :maxlength="24"></el-input>
                        <span class="stringCount">{{24 - (data.linkText ? data.linkText.length : 0)}}</span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-label form-label2">最终到达网址<em>*</em>：</div>
                    <div class="form-input " :class="{'showTipInput': showTip1}">
                        <el-input class="el-input-title" v-model="data.link" @change="changeInput('link-1')" size="small" placeholder="请输入网址"></el-input>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-label form-label2">广告内容描述<em>*</em>：</div>
                    <div class="form-input " :class="{'showTipInput': showTip2}">
                        <el-input class="el-input-title" v-model="data.description" @change="changeInput('link-2')"  size="small" placeholder="请输入描述" :maxlength="34"></el-input>
                        <span class="stringCount">{{34 - (data.description ? data.description.length : 0)}}</span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-label form-label2">建议<em>*</em>：</div>
                    <div class="form-input " :class="{'showTipInput': showTip3}">
                        <el-input class="el-input-title" v-model="data.suggestion"  @change="changeInput('link-3')" size="small" placeholder="请输入建议" :maxlength="34"></el-input>
                        <span class="stringCount">{{34 - (data.suggestion ? data.suggestion.length : 0 )}}</span>
                    </div>
                </div>
            </el-form>

            <el-form class="popover-form" v-if="type == 'CALLOUT'">
                <div class="form-label form-label1">宣传信息<em>*</em>：</div>
                <div class="form-input " :class="{'showTipInput': showTipInput}">
                    <el-input class="el-input-title" v-model="data.text" @change="changeInput('callout')" size="small" placeholder="请输入宣传信息"  :maxlength="24"></el-input>
                    <span class="stringCount">{{24 - (data.text ? data.text.length : 0)}}</span>
                </div>
            </el-form>

            <div slot="footer">
                <div class="btn_common_white btn_common_small btn_common_cancel" @click="handleHidePopover">取消</div>
                <el-button v-if="!feedbackStatus" class="yellow-button-small" @click="editAds">保存</el-button>
                <el-button v-if="feedbackStatus" class="yellow-button-small" :loading="true">保存中</el-button>
            </div>
        </el-dialog>

        <el-dialog v-model="showTipPopover" @close="handleHideTipPopover" v-if="showTipPopover" class="el-delete">
            <div class="tip-wrapper">
                <div class="tip-left">
                    <i class="iconfont icon-tip icon-tip2"></i>
                </div>
                <div class="tip-right">
                    <span class="tip-title">删除提示</span>
                    <span class="tip-txt" v-if="type == 0">对应的广告组和广告都将被删除,是否确认删除?</span>
                    <span class="tip-txt" v-if="type == 1">对应的广告都将被删除,是否确认删除?</span>
                    <span class="tip-txt" v-if="type == 2">是否确认删除该广告?</span>
                    <span class="tip-txt" v-if="type == 4">是否确认删除该关键字</span>
                    <span class="tip-txt" v-if="type != 0 && type != 1 && type != 2 && type != 4">是否确认删除该产品附加信息</span>
                </div>
            </div>

            <div slot="footer">
                <div class="btn_common_white btn_common_small btn_common_cancel" @click="handleHideTipPopover">取消</div>
                <el-button v-if="!feedbackStatus" class="yellow-button-small" @click="deleteAds">确定</el-button>
                <el-button v-if="feedbackStatus" class="yellow-button-small" :loading="true">删除中</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Vue from 'vue'
    import {SHOW_POPOVER,SHOW_TIP_POPOVER} from '../../../store/mutation-types/manager'
    import { mapGetters } from 'Vuex'
    import { getCompetitionType , getTypeClass} from '../../../assets/js/option'
    import { Row, Col,Dialog, Form ,FormItem, Option , Button, Message ,Table, TableColumn} from 'element-ui'
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Dialog);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Option);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);

    export default{
        data(){
            return{
                showTipKeyword: false,
                showTipPrice: false,
                showTipInput: false,
                showTip0: false,
                showTip1: false,
                showTip2: false,
                showTip3: false,
                phone: '',
                tipType:
                    [{
                        txt: '广泛匹配',
                        tipClass: 'icon-widely-match tip-wrapper1',
                        tipWrapper: 'tip-wrapper1',
                        macthType: 'BROAD'
                    },
                    {
                        txt: '完全匹配',
                        tipClass: 'icon-complete-match tip-wrapper1',
                        tipWrapper: 'tip-wrapper1',
                        macthType: 'EXACT'
                    },
                    {
                        txt: '短语匹配',
                        tipClass: 'icon-phrase-match tip-wrapper2',
                        tipWrapper: 'tip-wrapper2',
                        macthType: 'PHRASE'
                    }],
                showTip: false,
                formLabelWidth: '120px',
                formLabelWidth2: '150px',
                formLabelWidth1: '85px',
                deleteData: {},
                editData: {},
                macthType: ''
            }
        },
        methods: {
            edit(e) {
                let input = e.target.parentNode.querySelectorAll('input')[0];
                setTimeout(() => {
                    input.focus();
                }, 0);
            },
            searchKeyword() {
                if(this.data.keyword){
                    this.$store.dispatch('googleQueryKeyword',{'text': this.data.keyword})
                        .then(response => {
                            if(response.data && response.data.success){
                                this.popover.reachData = response.data.data.reach || 0;
                                this.popover.competition = getCompetitionType(response.data.data.competition) || '';
                                if(response.data.data && response.data.data.reach){
                                    this.popover.reachData = response.data.data.reach;
                                }else {
                                    this.popover.reachData = 0;
                                }
                                if(response.data.data && response.data.data.competition){
                                    this.popover.competition = getCompetitionType(response.data.data.competition);
                                }else {
                                    this.popover.competition = ''
                                }
                            }
                        });
                }
            },
            selectType(row) {
                this.data.matchType = row.macthType;
                this.chooseIcon = row.tipClass;
                this.showTip = false;
            },
            handleHidePopover() {
                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                this.$store.commit('SHOW_POPOVER',{showPopover: false});
            },
            handleHideTipPopover() {
                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
            },
            changeInput(type) {
                switch(type){
                    case 'callout':
                        this.showTipInput = false;
                        break;
                    case 'call':
                        this.showTipInput = false;
                        break;
                    case 'link-0':
                        this.showTip0 = false;
                        break;
                    case 'link-1':
                        this.showTip1 = false;
                        break;
                    case 'link-2':
                        this.showTip2 = false;
                        break;
                    case 'link-3':
                        this.showTip3 = false;
                        break;
                    case 'keyword-0':
                        this.showTipKeyword = false;
                        break;
                    case 'keyword-1':
                        this.showTipPrice = false;
                        break;
                }

            },
            editAds() {
                switch(this.type){
                    case 0:
                        this.editData = {
                            'localId': this.popover.localId,
                            'platFormId': this.popover.platFormId,
                            'newName': this.popover.adName
                        };
                        this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                        this.$store.dispatch('googleUpdateAdSeries',this.editData)
                            .then(response => {
                                if(response.data && response.data.success){
                                    Message.success({
                                        message: '修改成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_POPOVER',{showPopover: false});
                            });
                        break;
                    case 4:
                        if(!this.data.keyword){
                            this.showTipKeyword = true;
                            Message.warning({
                                message: '关键词不能为空'
                            });
                            return;
                        }else if(!this.data.defaultSpend){
                            this.showTipPrice = true;
                            Message.warning({
                                message: '默认出价不能为空'
                            });
                            return;
                        }
                        this.editData = {
                            'localId': this.data.id,
                            'linkPlatFormFlag': this.data.platformAdGroupId,
                            'value': this.data.keyword,
                            'cpcAmount':  this.data.defaultSpend,
                            'macthType': this.data.matchType
                        };
                        this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                        this.$store.dispatch('googleUpdateKeyword',this.editData)
                            .then(response => {
                                if(response.data && response.data.success){
                                    Message.success({
                                        message: '修改成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_POPOVER',{showPopover: false});
                            });
                        break;
                    case 'CALLOUT':
                        if(!this.data.text){
                            this.showTipInput = true;
                            Message.warning({
                                message: '宣传信息不能为空'
                            });
                            return;
                        }
                        this.editData = {
                            'id': this.popover.id,
                            'text': this.data.text,
                        };
                        this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                        this.$store.dispatch('googleUpdateAdditionCallout',this.editData)
                            .then(response => {
                                if(response.data && response.data.success){
                                    Message.success({
                                        message: '修改成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_POPOVER',{showPopover: false});
                            });
                        break;
                    case 'CALL':
                        if(!this.data.phone){
                            this.showTipInput = true;
                            Message.warning({
                                message: '电话号码不能为空'
                            });
                            return;
                        }
                        this.editData = {
                            'id': this.popover.id,
                            'countryCode': this.countryList[this.data.countryIndex].code,
                            'Phone': this.data.phone
                        };
                        this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                        this.$store.dispatch('googleUpdateAdditionCall',this.editData)
                            .then(response => {
                                if(response.data && response.data.success){
                                    Message.success({
                                        message: '修改成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_POPOVER',{showPopover: false});
                            });
                        break;
                    case 'SITELINK':
                        if(!this.data.linkText){
                            this.showTip0 = true;
                            Message.warning({
                                message: '链接文字不能为空'
                            });
                            return;
                        }else if(!this.data.link){
                            this.showTip1 = true;
                            Message.warning({
                                message: '最终到达网址不能为空'
                            });
                            return;
                        }else if(!this.data.description){
                            this.showTip2 = true;
                            Message.warning({
                                message: '广告内容描述不能为空'
                            });
                            return;
                        }else if(!this.data.suggestion){
                            this.showTip3 = true;
                            Message.warning({
                                message: '建议不能为空'
                            });
                            return;
                        }
                        this.editData = {
                            'id': this.popover.id,
                            'linkText': this.data.linkText,
                            'link': this.data.link,
                            'description': this.data.description,
                            'suggestion': this.data.suggestion
                        };
                        this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                        this.$store.dispatch('googleUpdateAdditionLink',this.editData)
                            .then(response => {
                                if(response.data && response.data.success){
                                    Message.success({
                                        message: '修改成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_POPOVER',{showPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_POPOVER',{showPopover: false});
                            });
                        break;
                }
            },
            deleteAds() {
                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: true});
                switch(this.type){
                    case 0:
                        this.deleteData = {
                            'localId': this.tipPopover.localId,
                            'platFormId': this.tipPopover.platFormId
                        };
                        this.$store.dispatch('googleDeleteAdSeries',this.deleteData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '删除成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            });
                        break;
                    case 1:
                        this.deleteData = {
                            'localId': this.tipPopover.localId,
                            'platFormId': this.tipPopover.platFormId
                        };
                        this.$store.dispatch('googleDeleteAdGroup',this.deleteData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '删除成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            });
                        break;
                    case 2:
                        this.deleteData = {
                            'localId': this.tipPopover.localId,
                            'platFormId': this.tipPopover.platFormId,
                            'adGroupId': this.tipPopover.adGroupId,
                        };
                        this.$store.dispatch('googleDeleteAd',this.deleteData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '删除成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            });
                        break;
                    case 4:
                        this.deleteData = {
                            'localId': this.tipPopover.id,
                            'keywordId': this.tipPopover.platFormId,
                            'adGroupId': this.tipPopover.platformAdGroupId,
                            'isInclude': this.tipPopover.include
                        };
                        this.$store.dispatch('googleDeleteKeyword',this.deleteData)
                            .then(response => {
                                if(response.data && response.data.code == 1){
                                    Message.success({
                                        message: '删除成功'
                                    });
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                    this.$parent['getManagerList']();
                                }else {
                                    this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                    this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                                }
                            })
                            .catch((error) => {
                                this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                                this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            });
                        break;

                    case 'CALLOUT':
                        this.deleteAddition();
                        break;
                    case 'CALL':
                        this.deleteAddition();
                        break;
                    case 'SITELINK':
                        this.deleteAddition();
                        break;
                }
            },
            deleteAddition() {
                this.deleteData = {
                    'id': this.tipPopover.id
                };
                this.$store.dispatch('googleDeleteAddition',this.deleteData)
                    .then(response => {
                        if(response.data && response.data.code == 1){
                            Message.success({
                                message: '删除成功'
                            });
                            this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                            this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                            this.$parent['getManagerList']();
                        }else {
                            this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                            this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                        }
                    })
                    .catch((error) => {
                        this.$store.commit('FEEDBACK_STATUS',{feedbackStatus: false});
                        this.$store.commit('SHOW_TIP_POPOVER',{showTipPopover: false});
                    });
            }
        },
        props: {
            'type':{
                default: 0
            },
            'data': {
                default: null
            }
        },
        computed:{
            ...mapGetters({
                    'showPopover': 'getShowPopover',
                    'showTipPopover': 'getShowTipPopover',
                    'popover': 'getPopoverData',
                    'tipPopover': 'getTipPopoverData',
                    'countryList': 'getCountryLists',
                    'feedbackStatus': 'getFeedbackStatus'
                }),
            chooseIcon: function () {
                switch (this.data.matchType){
                    case 'BROAD':
                        return 'icon-widely-match tip-wrapper1';
                    case 'PHRASE':
                        return 'icon-phrase-match tip-wrapper2';
                    case 'EXACT':
                        return 'icon-complete-match tip-wrapper1';
                }
            },
            showTel: function () {
                var tel = '+' + this.countryList[this.data.countryIndex].phone + this.data.phone;
                return tel;
            }
        }
    }
</script>

<style scoped lang="scss">
    .btn_common_cancel {
        margin-right: 20px;
    }
    .popover-form{
        height: 100px;
        .input-country{
            width: 150px;
            margin-right: 20px;
        }
    }
    .form-item {
        margin-bottom: 10px;
    }
    .form-label {
        display: inline-block;
        text-align: right;
        margin-right: 10px;
    }
    .form-label1 {
        width: 108px;
    }
    .form-label2 {
        width: 120px;
    }
    .form-label3 {
        width: 80px;
    }
    em {
        color:#FF3526;
    }
    .form-input {
        display: inline-block;
    }
    .type-right {
        line-height: 35px;
        font-size: 12px;
        color: #666666;
        .icon-wrapper {
            width: 30px;
            float: left;
            cursor: pointer;
        }
        .tip-config {
            display: inline-block;
            line-height: 30px;
            height: 30px;
            span {
                margin-left: 15px;
            }
        }
        .tip-table{
            box-shadow: 1px 0 8px #d3d4d6;
            border-radius: 4px;
            width: 210px;
            display: inline-block;
            margin: 10px 0 0 -20px;
            .tip-txt1 {
                float: left;
            }
            .iconfont {
                float: left;
            }
        }
    }
    .tip-icon {
        color: #B0BFC6;
        margin-left: 40px;
    }
    .tip-icon3 {
        font-size: 22px;
        color: #B0BFC6;
    }
    .tip-wrapper1 {
        font-size: 22px;
    }
    .tip-wrapper2 {
        font-size: 14px;
    }
    .el-input {
        width: 220px;
    }
    .btn-common {
        margin-left: 10px;
    }
    .aim {
        width: 100%;
        padding: 10px 0 0 10px;
        display: inline-block;
        margin-top: 10px;
        font-size: 13px;
        color: #666666;
        span {
            float: left;
            .icon-tip {
                color: #FFC000;
                margin-right: 5px;
            }
        }
    }
    .tip-wrapper {
        display: inline-block;
        padding: 0 20px;
        .tip-left {
            color: #FFC000;
            font-size: 25px;
            float: left;
            text-align: center;
            line-height: 30px;
            margin-right: 15px;
            .icon-tip2 {
                font-size: 28px;
            }
        }
        .tip-right {
            float: left;
            .tip-title {
                float: left;
                width: 100%;
                font-size: 14px;
                color: #666666;
                line-height: 30px;
            }
            .tip-txt {
                float: left;
                font-size: 12px;
                color: #666666;
                line-height: 28px;
            }
        }

    }
    .stringCount{
        position: relative;
        left: -25px;
        top: -2px;
        display: inline-block;
        width: 25px;
        vertical-align: top;
        line-height: 34px;
        color: #999;
        font-size: 12px;
    }
    .stringMoney{
        position: absolute;
        left: 80px;
        top: 47px;
        width: 27px;
        text-align: right;
        color: #48576a;
        font-size: 12px;
    }
    .tel-wrapper {
        margin-left: 120px;
        font-size: 12px;
        line-height: 8px;
        color: #999;
        position: absolute;
        top: 130px;
    }

</style>
